﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="search_article.aspx.cs" Inherits="AutoFix.search_article" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="AdditionalPlaceHolder" runat="server">
        <asp:HiddenField ID="hdnModelSelectedValue" runat="server" />
    <asp:HiddenField ID="hdnModelTypeSelectedValue" runat="server" />
    <asp:HiddenField ID="hdnModelTypeYearSelectedValue" runat="server" />
    <div><asp:TextBox ID="txtSearch" runat="server" CssClass="search-text-box" />&nbsp;<span id="slider-button" class="arrow-down"></span>&nbsp;<asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="button" OnClick="btnSearch_Click" /></div>
    <div id="slider">
        <div>Model: <asp:DropDownList ID="ddVehicleModel" runat="server" /></div>
        <div>Type: <asp:DropDownList ID="ddVehicleModelType" runat="server" /></div>
        <div>Year: <asp:DropDownList ID="ddVehicleModelYear" runat="server" /></div>
    </div>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="MessagePlaceHolder" runat="server">
    Select the vehicle model information from the selection and search for repairs by typing the article name
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
     <asp:HiddenField ID="hdnArticleID" runat="server" Value='<%# DataBinder.Eval(Container, "DataItem.ArticleID") %>' />
    <div id="pageActionMessage" runat="server"></div>   
                               
    <div class="item">
        <asp:DataList ID="dtlArticles" runat="server" RepeatDirection="Horizontal" RepeatColumns="4">
            <ItemTemplate>
                
                <div class="item-box-holder">
                    <div class="item-holder">
                        <div style="position: relative; top: -15px">
                            <div class="item-common-left-holder">
                                <asp:Rating ID="articleRating" runat="server" CurrentRating='<%# DataBinder.Eval(Container, "DataItem.RatingStars") %>' MaxRating="5" StarCssClass="rating-star" WaitingStarCssClass="saved-rating-star" FilledStarCssClass="filled-rating-star" EmptyStarCssClass="empty-rating-star" OnChanged="articleRating_Changed" BehaviorID='<%# String.Format("{0},{1}", DataBinder.Eval(Container, "DataItem.ArticleID"), DataBinder.Eval(Container, "DataItem.UserID")) %>' ReadOnly='<%# DataBinder.Eval(Container, "DataItem.ReadOnly")%>' />
                                </div>
                            <div class="article-type-holder">
                                <div class="text-size-one"><span class="text-size-one-bold">Type:</span> <asp:Label ID="lblArticleType" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.ArticleTypeName") %>' /></div>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="item-image-background">
                            <asp:Image ID="imgArticleImage" runat="server" ImageUrl='<%# DataBinder.Eval(Container, "DataItem.ArticleImageUrl") %>' CssClass="item-image-background" /></div>
                        <div class="item-article-name-box-holder"><a class="link-text-large-blue article-name-search" href='<%# "repair_detail.aspx?article=" + DataBinder.Eval(Container, "DataItem.ArticleID") %>'><%# DataBinder.Eval(Container, "DataItem.ArticleName") %></a></div>
                    </div>
                    <div class="common-holder">
                        <div class="written-by-sub-holder"><span class="text-size-one">Written By:</span></div>

                        <div class="written-by-sub-holder-user-image">
                            <div class="written-by-user-image">
                                <asp:Image ID="imgUser" runat="server" ImageUrl='<%# DataBinder.Eval(Container, "DataItem.ProfilePictureURL") %>'  CssClass="written-by-user-image"/></div>
                        </div>
                        <div class="written-by-sub-holder"><a href="#"><%# DataBinder.Eval(Container, "DataItem.UserName") %></a></div>
                        <div class="clear"></div>
                    </div>
                </div>
            </ItemTemplate>
        </asp:DataList>
        <div class="clear"></div>
    </div>
     <script src="js/common.js"></script>
    <script type="text/ecmascript">
        var vehicleModelType = null;
        var pageName = "search_article.aspx";
        var isArrowDown = false;
        var isNotFirstLoad = false;

        function InitiateMethods() {
            $("#slider-button").bind("click", ToggleSlider);
        }
   
        function InitiateAjaxCall() {   
            var holder = null;
            GetDataViaAjax(holder, pageName, '', BindModelData, "GetAllModels");
            holder = null;
        }


function SelectModelInfo(data, serverMethod, clientFunction) {
    var data = data;
    var holder = null;
    GetDataViaAjax(holder, pageName, data, clientFunction, serverMethod);
    holder = null;
    data = null;

}
function BindSearchDataToGrid(holder) {
    if (holder == null) {
        $("#<%=pageActionMessage.ClientID%>").text("Fail to load articles to grid");
        $("#<%=pageActionMessage.ClientID%>").attr("class", "error-msg");
    }
}

function BindModelData(holder) {
    if (holder != null) {
        var listItem = "";
        for (var i = 0; i < holder.length; i++) {
            listItem += "<option value='" + holder[i].Key + "'>" + holder[i].Value + "</option>";
        }

        var clientID = "#<%=ddVehicleModel.ClientID%>";
        $(clientID).children().remove();
        $(clientID).append(listItem);
        $(clientID).change(function (e) {
            var data = JSON.stringify({ vehicleModelID: $(this).val() });
            SelectModelInfo(data, "GetModelTypes", BindModelDataType);
            $("#<%=hdnModelSelectedValue.ClientID%>").val($(clientID + " option:selected").val());
        });

        $(clientID).change();
    }
    else {
        $("#<%=pageActionMessage.ClientID%>").text("Fail to load vehicle model");
        $("#<%=pageActionMessage.ClientID%>").attr("class", "error-msg");
    }
}
function BindModelDataType(holder) {
    if (holder != null) {
        var listItem = "";
        for (var i = 0; i < holder.length; i++) {
            listItem += "<option value='" + holder[i].Key + "'>" + holder[i].Value + "</option>"
        }
        var clientID = "#<%=ddVehicleModelType.ClientID%>";
        $(clientID).children().remove();
        $(clientID).append(listItem);

        $(clientID).change(function (e) {
            var data = JSON.stringify({ vehicleModelTypeID: $(this).val() });
            vehicleModelType = data;
            SelectModelInfo(data, "GetModelTypeYears", BindModelYear);
            $("#<%=hdnModelTypeSelectedValue.ClientID%>").val($(clientID + " option:selected").val());
        });
        $(clientID).change();
    }
    else {
        $("#<%=pageActionMessage.ClientID%>").text("Fail to load vehicle model types");
        $("#<%=pageActionMessage.ClientID%>").attr("class", "error-msg");
    }
}

function BindModelYear(holder) {
    if (holder != null) {
        var listItem = "";
        for (var i = 0; i < holder.length; i++) {
            listItem += "<option value='" + holder[i].Key + "'>" + holder[i].Value + "</option>"
        }
        var clientID = "#<%=ddVehicleModelYear.ClientID%>";
        $(clientID).children().remove();
        $(clientID).append(listItem);
        $("#<%=hdnModelTypeYearSelectedValue.ClientID%>").val($(clientID + " option:selected").val());
      }

    else {
        $("#<%=pageActionMessage.ClientID%>").text("Fail to load vehicle model type years");
        $("#<%=pageActionMessage.ClientID%>").attr("class", "error-msg");
    }

}
        function ToggleSlider() {
            $("#slider").slideToggle("slow",
                function () {
                    if (isArrowDown != false) {
                        if ($("#slider-button").attr("class") == "arrow-up") {
                            $("#slider-button").attr("class", "arrow-down");
                            isArrowDown = false;
                        }
                    }
                    else {
                        if ($("#slider-button").attr("class") == "arrow-down") {
                            $("#slider-button").attr("class", "arrow-up");
                            isArrowDown = true;
                        }
                    }

                });
        }
        InitiateAjaxCall();
        InitiateMethods()
    </script>
    
    <asp:Literal ID="ltrlJS" runat="server" />
</asp:Content>
